//添加功能
var add = document.querySelector(".add");
// var all = document.querySelector('.all');
var hidden_add = document.querySelector(".hidden_add");
var hidden_add_btn_tip = document.querySelector(".hidden_add_btn_tip");
var hidden_add_btn_Second = document.querySelector(".hidden_add_btn_Second");
var tbody = document.querySelector("tbody"); //获取tbody

var hidden_add_textArea_one_right = document.querySelector(
  ".hidden_add_textArea_one_right"
);
var hidden_add_textArea_two_right = document.querySelector(
  ".hidden_add_textArea_two_right"
);
var hidden_add_textArea_three_right = document.querySelector(
  ".hidden_add_textArea_three_right"
);
var hidden_add_btn = document.querySelector(".hidden_add_btn");
var hidden_add_delect = document.querySelector(".hidden_add_delect");
add.onclick = function () {
  hidden_add.style.display = "block";
  hidden_add_delect.onclick = function () {
    hidden_add.style.display = "none";
  };
  hidden_add_btn.onclick = function () {
    if (
      hidden_add_textArea_one_right.value == "" &&
      hidden_add_textArea_two_right.value == "" &&
      hidden_add_textArea_three_right.value == ""
    ) {
      alert("不要调皮！您未输入任何东西！");
    } else if (
      hidden_add_textArea_one_right.value != "" &&
      hidden_add_textArea_two_right.value == "" &&
      hidden_add_textArea_three_right.value == ""
    ) {
      alert("嗯哼？咱也就是说他的班级和职位你怕是忘写了吧！");
    } else if (
      hidden_add_textArea_one_right.value == "" &&
      hidden_add_textArea_two_right.value != "" &&
      hidden_add_textArea_three_right.value == ""
    ) {
      alert("嗯哼？咱也就是说他的名字和职位你怕是忘写了吧！");
    } else if (
      hidden_add_textArea_one_right.value == "" &&
      hidden_add_textArea_two_right.value == "" &&
      hidden_add_textArea_three_right.value != ""
    ) {
      alert("嗯哼？咱也就是说他的名字和班级你怕是忘写了吧！");
    } else if (
      hidden_add_textArea_one_right.value != "" &&
      hidden_add_textArea_two_right.value == "" &&
      hidden_add_textArea_three_right.value != ""
    ) {
      alert("嗯哼？咱也就是说他的班级你怕是忘写了吧！");
    } else if (
      hidden_add_textArea_one_right.value != "" &&
      hidden_add_textArea_two_right.value != "" &&
      hidden_add_textArea_three_right.value == ""
    ) {
      alert("嗯哼？咱也就是说他的职位你怕是忘写了吧！");
    } else if (
      hidden_add_textArea_one_right.value == "" &&
      hidden_add_textArea_two_right.value != "" &&
      hidden_add_textArea_three_right.value != ""
    ) {
      alert("嗯哼？咱也就是说他的名字你怕是忘写了吧！");
    } else {
      var datas_one = [
        {
          name: hidden_add_textArea_one_right.value,
          class: hidden_add_textArea_two_right.value,
          office: hidden_add_textArea_three_right.value,
        },
      ];
      var tbody = document.querySelector("tbody");
      for (var i = 0; i < datas_one.length; i++) {
        //外边的for循环管行
        // 1 创建行
        var tr = document.createElement("tr");
        tbody.appendChild(tr);
        //行里边创建单元格 td 单元格的数量取决于每个对象里面的属性的个数
        for (var k in datas_one[i]) {
          // 2 创建单元格(跟数据有关系的3个单元格)
          var td = document.createElement("td");
          //把对象里面的属性值给  td
          //for(var k in obj){
          //     k 得到的是属性名
          //     obj[k]得到的是属性值
          // }
          td.innerHTML = datas_one[i][k];
          td.className = "class_td";
          tr.appendChild(td);
        }
        // 3 创建有删除两字的单元格
        var td = document.createElement("td");
        td.innerHTML =
          '<a href="javascript:;"  class="btn_delect" onclick="this.parentNode.parentNode.remove(tr);"> 删除 </a>';
        tr.appendChild(td);
        var td = document.createElement("td");
        td.innerHTML =
          '<a href="javascript:;" class="btn_change" onclick="one();"> 修改 </a>';

        tr.appendChild(td);
      }
      // alert(hidden_add_textArea_one_right.value);
      // var tr =document.createElement('tr');
      // tbody.appendChild(tr);

      //  for(var d=0;d<3;d++){
      //    var td =document.createElement('td');
      //    td.innerHTML=1;
      //    td.appendChild(tr);
      //    }
      //     var td =document.createElement('td');
      // for(var n=1;n<4;n++){
      //     tr.appendChild(td);
      //   td.innerHTML = datas_one;
      hidden_add_btn_Second.style.display = "block";
      hidden_add_btn_tip.style.display = "block";
      hidden_add_btn_tip.onclick = function () {
        clearInterval(timer);
        timer = null; //清除定时器
        hidden_add_btn_Second.style.display = "none";
        hidden_add_btn_tip.style.display = "none";
      };
      var timer = setInterval(function () {
        hidden_add.style.display = "none";
      }, 4000);
    }
    hidden_add_textArea_one_right.value = "";
    hidden_add_textArea_two_right.value = "";
    hidden_add_textArea_three_right.value = "";

    add.onclick = function () {
      hidden_add.style.display = "block";
      hidden_add_btn_Second.style.display = "none";
      hidden_add_btn_tip.style.display = "none";
      clearInterval(timer);
      timer = null; //清除定时器
      // alert('a');

      //     // add.onclick();
    };
    // clearInterval(timer);
    // timer = null; //清除定时器
    // alert('添加成功！5秒后自动返回,您可点击右上角按钮关闭添加页面！');
  };
};
// 4 删除操作 开始
//   var as = document.querySelectorAll('a');
//   for(var i=0;i<as.length;i++){
//   as.onclick =function(){
//点击a所在的行，(链接的爸爸的爸爸)，node.removeChild(child)
//  tbody.remove(this.parentNode.parentNode);
// alert('a');
// this.remove();
//   };
//   }

//创建单元格和删除操作
var datas = [
  {
    name: "连阳",
    class: "三班",
    office: "学生",
  },
  {
    name: "嘉乐",
    class: "三班",
    office: "班长",
  },
  {
    name: "军战",
    class: "三班",
    office: "老班",
  },
  {
    name: "俊明",
    class: "三班",
    office: "副班",
  },
];
//往tbody创建行，有几人创建几行
var tbody = document.querySelector("tbody");
for (var i = 0; i < datas.length; i++) {
  //外边的for循环管行
  // 1 创建行
  var tr = document.createElement("tr");
  tbody.appendChild(tr);
  tr.className = "class_tr";
  //行里边创建单元格 td 单元格的数量取决于每个对象里面的属性的个数
  for (var k in datas[i]) {
    // 2 创建单元格(跟数据有关系的3个单元格)
    var td = document.createElement("td");
    //把对象里面的属性值给  td
    //for(var k in obj){
    //     k 得到的是属性名
    //     obj[k]得到的是属性值
    // }
    td.innerHTML = datas[i][k];
    tr.appendChild(td);
    td.className = "class_td";
  }
  // 3 创建有删除两字的单元格
  var td = document.createElement("td");
  td.innerHTML = '<a href="javascript:;"  class="btn_delect"> 删除 </a>';
  tr.appendChild(td);
  var td = document.createElement("td");
  td.innerHTML = '<a href="javascript:;" class="btn_change"> 修改 </a>';
  tr.appendChild(td);
}

// 4 删除操作 开始
var as = document.getElementsByClassName("btn_delect");
for (var i = 0; i < as.length; i++) {
  as[i].onclick = function () {
    //点击a所在的行，(链接的爸爸的爸爸)，node.removeChild(child)
    tbody.removeChild(this.parentNode.parentNode);
  };
}
//修改操作
var id_table = document.getElementById("id_table");
var change_a = id_table.getElementsByClassName("btn_change");
//为修改操作的每一个a绑定事件
one();
function one() {
  for (let i = 0; i < change_a.length; i++) {
    change_a[i].onclick = function () {
      alert("您现在可以修改数据了！");
      //获取该a的tr
      var tr = this.parentNode.parentNode;
      // td.className="class_td";
      var tds = document.getElementsByClassName("class_td");
      //获取到的每一个td为它们绑定点击事件
      for (let i = 0; i < tds.length; i++) {
        tds[i].index = i; //为下边的下标做准备
        tds[i].onclick = function (event) {
          var evt = event || window.event;
          //这一行很重要防止多次带年纪出现错误，只有一次点击td才能触发；
          //当然这个要配合上边的input的样式和td的高度和宽度正好一样才能防止误触；
          if (evt.target.className.toLowerCase() == "class_td") {
            var input = document.createElement("input");
            input.value = this.innerHTML;
            tds[this.index].innerHTML = ""; //清除td中原有的文字
            tds[this.index].appendChild(input);
            input.focus(); //获取焦点
          }
          input.onblur = function () {
            this.parentNode.innerHTML = this.value;
            tds[i].onclick = null;
          };
        };
      }
    };
  }
}

//搜索功能
var title_select_one_right = document.querySelector(".title_select_one_right");
var title_select_two_right = document.querySelector(".title_select_two_right");
var title_select_three_right = document.querySelector(
  ".title_select_three_right"
);
var class_tr = document.querySelectorAll(".class_tr");
// var tr_fist_td =document.
title_select_one_right.onclick = function () {
  // timer_one = setInterval(function() {
  // for(let i=0;i<class_tr.length;i++){
  //         if(title_select_one_right.innerHTML == class_tr[i].firstChild.innerHTML){
  //           // alert('a');
  //         }
  //         else{
  //           // alert('b');
  //         }
  //       }
  // if(title_select_one_right.innerHTML == class_tr[i].firstChild.innerHTML){
  //   alert('a');
  // }
  // else{
  //   alert('b');
  // }
  // }, 6000);

  // if(title_select_one_right.innerHTML ==''){
  //   alert('a');
  // }
  // else{
  //   alert('b');
  // }
  // for(let i=0;i<class_tr.length;i++){
  //   alert(class_tr[i].firstChild.innerHTML);
  // }

  title_select_one_right.style.innerHTML = "连阳";
  for (let i = 0; i < class_tr.length - 1; i++) {
    // timer_one= setInterval(function() {
    //   if(title_select_one_right.style.innerHTML == class_tr[0].firstChild.innerHTML||
    // title_select_one_right.style.innerHTML == class_tr[1].firstChild.innerHTML){
    //     alert('a');
    //   }
    //   else{
    //     alert('b');
    //   }
    //   }, 6000);
  }
};

// var timer_one= setInterval(function() {
//   if(title_select_one_right.style.innerHTML == class_tr[i].firstChild.innerHTML){
//     alert('a');
//   }
//   else{
//     alert('b');
//   }
//   }, 6000);
